{% extends 'base.html' %}
{% block css %}
<link href="/static/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-switch.min.css" rel="stylesheet">

{% endblock %}
{% block content %}
<div class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <div class="loading"></div>
                        <h2>vpn用户管理 </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content" style="padding-top:10px;border:none">

                        <div class="row" style="margin-left: 5px;">
                            <div class="form-inline">
                                 <div class="form-group">
                                     <input type="text" id="amSearch" class="form-control"/>
                                 </div>
                                 <div class="form-group" style="margin-top:-5px">
                                     <button type="button" class="btn btn-default" id="searchBtn">搜索</button>
                                 </div>
                             </div>
                        </div>
                        <div class="x_content">
                            <div id="toolbar" class="btn-group">

                                <button id="btn_add" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                </button>
                                <button id="btn_edit" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                                </button>
                                <button id="btn_edit" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>导入
                                </button>
                                <button id="btn_edit" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>导出
                                </button>
                            </div>
                        </div>

                        <div id="show_table" style="display:block;">
                            <div class="x_content table-responsive" style="border:none">
                            <table id="datatable" class="table table-striped table-bordered" style="width:100%;">
                            <thead>
                                <tr>
                                    <!--<th>单选</th>-->
                                    <th>账号</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in all_users %}
                                <tr>
                                    <td>{{ i.username }}</td>
                                    <td>
                                        {% if not i.name %}
                                            None
                                        {% else %}
                                            {{ i.name }}
                                        {% endif %}

                                    </td>
                                    <td>{{ i.email }}</td>
                                    <td>{% if i.active == 1 %}<span class="label label-info">激活</span>{% else %}<span class="label label-danger">冻结</span>{% endif %}</td>

                                    <td>
                                            <a href="#"  data-toggle="modal" data-target="#reqDelete-t{{ i.username }}" class="btn btn-danger btn-sm" role="button"><i class="fa fa-trash-o "></i></a>
                                            <a href="/op/vpn_update-{{ i.username }}" >密码修改</a>
                                    </td>

                                    	<div class="modal fade" id="reqDelete-t{{ i.username }}" tabindex="-1" role="dialog" aria-labelledby="reqDelete" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                        <h4 class="modal-title" id="reqDelete">提示</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        确认是否删除？
                                                        <div><br /><strong>{{ i.username }}</strong></p></div>

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                                                        <a style="margin:4px;" class="btn btn-danger btn-sm" href="/op/vpn_del-{{ i.username }}">删除</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                </tr>
                                {% endfor %}
                            </tbody>

                            </table>
                                		<div style="text-align:center;">
                                        <ul class="pagination" style="display:inline-block;">
                                            <li class="active">
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"0"}}">{{pageNo|add:"1"}}</a>
                                            </li>
                                            <li>
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"1"}}">{{pageNo|add:"2"}}</a>
                                            </li>
                                            <li>
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"2"}}">{{pageNo|add:"3"}}</a>
                                            </li>
                                            <li>
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"3"}}">{{pageNo|add:"4"}}</a>
                                            </li>
                                            <li>
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"4"}}">{{pageNo|add:"5"}}</a>
                                            </li>
                                            <li>
                                                 <a href="/op/vpn_manger?pageNo={{pageNo|add:"1"}}">后一页</a>
                                            </li>
                                        </ul>
                                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}
{% block js %}
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/dataTables.bootstrap.min.js"></script>
<script src="/static/js/display_select.js"></script>
<script src="/static/js/bootstrap-switch.min.js"></script>

<script>
    //用户添加
    $(document).ready(function(){
     $("#btn_add").click(function () {
            window.location.href = "/op/vpn_add";
        });


     //搜索查询
        $('#searchBtn').click(function () {
            var get_user = $("#amSearch").val()
            params = {
                "get_user":get_user,
            }
             $.ajax({
                type: "POST",
                url: "/op/vpn_manger",
                data: params,
                success: function (res) {
                            location.reload()
               },
                error : function(res) {
                    alert("用户查找失败");
                }
            });

        });
    });

</script>


{% endblock %}

